<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent>
        <el-form-item label="机型：" style="width: 200px;float: left" label-width="70px">
          <el-select clearable v-model="QueryForm.mch_kid_type_id" placeholder="请选择机型">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in getkids" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质保时长：" style="width: 240px;float: left" label-width="90px">
          <el-select clearable v-model="QueryForm.qa_duration" placeholder="请选择质保时长">
            <el-option label="365天" :value="365"></el-option>
            <el-option label="730天" :value="730"></el-option>
            <el-option label="1095天" :value="1095"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质保名称：" style="width: 250px;float: left" label-width="90px">
          <el-input
              placeholder="请输入质保名称"
              v-model="QueryForm.qa_name"
              clearable
              autocomplete="off"/>
        </el-form-item>
        <el-button style="margin-left: 10px" native-type="submit" type="primary" icon="el-icon-search"
                   @click="Query(true)">搜索
        </el-button>
        <el-button style="float:right" type="primary" icon="el-icon-plus" @click="opendialog">新建</el-button>
      </el-form>
    </div>
    <div>
      <el-table header-cell-class-name="tableheader"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                v-loading="Loading"
                :data="list"
                highlight-current-row
                border
                fit
                element-loading-text="加载中···"
                class="lefttable"
                max-height="800">
        <el-table-column align="center" label="机型">
          <template slot-scope="scope">
            {{ scope.row.mch_kid_type }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="质保名称">
          <template slot-scope="scope">
            {{ scope.row.qa_name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="质保时长">
          <template slot-scope="scope">
            {{ scope.row.qa_duration }}天
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后修改日期">
          <template slot-scope="scope">
            {{ scope.row.updatetime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="系统默认">
          <template slot-scope="scope">
            <div v-if="scope.row.is_def">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.is_use">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="opendialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain @click="deleteitem(scope.row)" v-if="scope.row.is_use">禁用</el-button>
            <el-button type="success" size="mini" plain @click="reductionqa(scope.row)" v-else>启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            style="text-align: center"
            layout="prev, pager, next"
            small
            :current-page="QueryForm.page"
            :page-size="QueryForm.pagesize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="dialogtit" :visible.sync="dialog" width="45%">
      <el-form ref="dialogform" :model="dialogform" :rules="dialogrule" label-width="100px">
        <div class="clearfix">
          <el-form-item label="机型：" prop="mch_kid_type_id" style="float: left;width: 33.3%">
            <el-select clearable v-model="dialogform.mch_kid_type_id" placeholder="请选择机型">
              <el-option v-for="item in getkids" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系统默认：" prop="is_def" style="float: left;width: 33.3%">
            <el-select clearable v-model="dialogform.is_def" placeholder="请选择系统默认">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="质保时长：" prop="qa_duration" style="float: left;width: 33.3%">
            <el-select clearable v-model="dialogform.qa_duration" placeholder="请选择质保时长">
              <el-option label="365天" :value="365"></el-option>
              <el-option label="730天" :value="730"></el-option>
              <el-option label="1095天" :value="1095"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="质保名称：" prop="qa_name">
          <el-input
              style="width: 100%;"
              placeholder="请输入质保名称"
              v-model="dialogform.qa_name"
              clearable
              autocomplete="off"/>
        </el-form-item>
        <el-form-item label="质保细则：" prop="qa_content">
          <el-input
              style="width: 100%;"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 10}"
              placeholder="请输入质保细则"
              v-model="dialogform.qa_content"
              clearable
              autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogbtn">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="es6">
export default {
  data() {
    return {
      getkids: [],
      QueryForm: {
        mch_kid_type_id: '',
        qa_duration: '',
        qa_name: '',
        ispage: true,
        page: 1,
        pagesize: 15,
      },
      list: [],
      total: 0,
      Loading: true,
      dialog: false,
      dialogtit: '',
      dialogform: {
        qa_service_id: '',
        mch_kid_type_id: '',
        is_def: '',
        qa_duration: '',
        qa_name: '',
        qa_content: '',
      },
      dialogrule: {
        mch_kid_type_id: [
          { required: true, message: '此项为必填项' }
        ],
        is_def: [
          { required: true, message: '此项为必填项' }
        ],
        qa_duration: [
          { required: true, message: '此项为必填项' }
        ],
        qa_name: [
          { required: true, message: '此项为必填项' }
        ],
        qa_content: [
          { required: true, message: '此项为必填项' }
        ],
      },
    };
  },
  created() {
    this.getkid()
    this.Query(true);
  },
  methods: {
    getkid() {
      this.$get(this.$api + '/mch_type/get_kid')
          .then((res) => {
            if (res.code === 0) {
              this.getkids = res.data
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    Query(isquery) {
      if (isquery) {
        this.QueryForm.page = 1
      }
      this.$post(this.$api + '/mch_qa/query_pagelist', this.QueryForm)
          .then((res) => {
            this.Loading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
    },
    //禁用质保
    deleteitem(item) {
      this.$confirm('确定禁用该条质保数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$get(this.$api + '/mch_qa/del', {
          qa_service_id: item.qa_service_id,
        })
            .then((res) => {
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.Query()
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
      })
    },
    //启用质保
    reductionqa(item) {
      this.$confirm('确定启用该条质保数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$get(this.$api + '/mch_qa/reduction', {
          qa_service_id: item.qa_service_id,
        })
            .then((res) => {
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.Query()
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
      })
    },
    opendialog(item) {
      this.dialog = true;
      if (item.qa_service_id === undefined) {
        this.dialogtit = '新建';
        this.dialogform = {
          qa_service_id: '',
          mch_kid_type_id: '',
          is_def: '',
          qa_duration: '',
          qa_name: '',
          qa_content: '',
        }
      } else {
        this.dialogtit = '编辑';
        this.dialogform = {
          qa_service_id: item.qa_service_id,
          mch_kid_type_id: item.mch_kid_type_id,
          is_def: item.is_def,
          qa_duration: item.qa_duration,
          qa_name: item.qa_name,
          qa_content: item.qa_content,
        }
      }
    },
    dialogbtn() {
      this.$refs['dialogform'].validate((valid) => {
        if (valid) {
          this.$post(this.$api + '/mch_qa/save', this.dialogform)
              .then((res) => {
                if (res.code === 0) {
                  this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                  });
                  this.dialog = false;
                  this.Query()
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              });
        }
      })
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    }
  }
};
</script>
